<template>
  <div class="manager-container">
      <div class="add-btn">
          <el-button type="primary" size="medium" round plain @click="addManager">新增管理员</el-button>
      </div>
       <el-table
            :data="managerList"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="序号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="username"
                label="账号名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="rolename"
                label="角色名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="status"
                label="角色状态">
                <template v-slot="{row:{status}}">
                    <el-button type="primary" size="mini" round plain v-if="status===1">正常</el-button>
                    <el-button type="warning" size="mini" round plain v-else>禁用</el-button>
                </template>
            </el-table-column>
            <el-table-column
                label="操作">
                <template v-slot="prop">
                    <el-button type="warning" size="mini"  @click="editManager(prop)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev,pager,next" :current-page="pageInfo.page" :page-size="pageInfo.size" :total="managerTotal" @current-change="changePage">
        </el-pagination>
        <ManagerDialog :boxShow="boxShow" ref="managerDialog"></ManagerDialog> 
  </div>
</template>
<script>
import {mapState,mapActions} from "vuex"
import ManagerDialog from "./ManagerDialog.vue"

export default {
    computed: {         
        ...mapState('managers',['managerList','managerTotal'])
    },
    methods: {
        ...mapActions('managers',['initManagerListActions']),
        ...mapActions('roles',['initRoleListActions']),
        changePage(pageno) {
            this.pageInfo.page = pageno  // 改变当前页页码
            this.initManagerListActions(this.pageInfo) // 请求新页面数据
        },
        addManager() {
            this.boxShow.isShow = true
        },
        editManager(prop) {
            this.$refs.managerDialog.managerForm = {...prop.row}
            this.boxShow.isShow = true
        },
    },
    created() {
        this.initManagerListActions(this.pageInfo)
        this.initRoleListActions()
    },
    data() {
        return {
            pageInfo: {
                page: 1,
                size: 2
            },
            boxShow: {
                isShow: false
            }
        }
    },
    components: {
        ManagerDialog
    }
}
</script>

<style scoped>
.add-btn{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
</style>